<template>
  <el-dialog
      title="查看流水详细信息"
      :visible.sync="lookFlowShow"
      width="90%"
      :before-close="handleClose"
  >
    <div v-if="formComputed">
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">交易号</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.jyls }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">交易日期</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.jyrq }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">业务编号</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.ywbh }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">原业务编号</span>
          <span style="float: right; color: #909399;">
                        {{ formComputed.ysjyls }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">业务类型</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                      {{ formComputed.ywlxbm }}
                  </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">保全项目代码</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.bqxmdm }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">保全项目名称</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                        {{ formComputed.bqxmmc }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">未开票金额</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.wkpje }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">交易金额(含税)</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                        {{ formComputed.jyje }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">交易金额(不含税)</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.bhsje }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">税率</span>
          <span style="float: right; color: #909399;padding-right: 18px;">
                        {{ formComputed.sysl }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">税额</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.xxse }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">获票人名称</span>
          <span style="float: right; color: #909399;padding-right: 18px;">
                        {{ formComputed.kfhm }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">纳税人识别号</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.nsrsbh }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">是否个人业务</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                        {{ formComputed.isgryw }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">证件类型</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.zjlx }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">证件号码</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                        {{ formComputed.zjhm }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">险种代码</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.xzdm }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">险种简称</span>
          <span style="float: right; color: #909399;padding-right: 18px">
                        {{ formComputed.xzjc }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">险种全称</span>
          <span
              style="
                            float: right;
                            color: #909399;
                        "
          >
                        {{ formComputed.xzqc }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <span style="font-weight: 700">备注</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.bz }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">交易机构</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.jyjg }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">投保单号</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.tbdh }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">汇交单号</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.hjdh }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">学平险受理号</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.xpxslh }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">缴费方式</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.jffs }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">税优识别码</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.sysbm }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">缴费起期</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.jfqsrq }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">缴费止期</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.jfjzrq }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">电子邮箱</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.dzyx }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">手机号</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.sjh }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">服务人员编码</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.fwrybh }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">服务人员姓名</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.fwryxm }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">区</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.qmc }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">部</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.bmc }}
                    </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">组</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.zmc }}
                    </span>
        </el-col>
        <el-col :span="12">
          <span style="font-weight: 700">来源系统</span>
          <span style="float: right; color: #909399">
                        {{ formComputed.sjly }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span style="font-weight: 700">供数日期</span>
          <span
              style="
                            float: right;
                            color: #909399;
                            padding-right: 18px;
                        "
          >
                        {{ formComputed.gsrq }}
                    </span>
        </el-col>
      </el-row>
    </div>

    <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleClose">
                确 定
            </el-button>
        </span>
  </el-dialog>
</template>
<script>
export default {
  model: {
    prop: 'lookFlowShow',
    event: 'change',
  },
  created() {
  },
  computed: {
    formComputed() {
      let w = this.$store.state.flowInvoice.selectedItems.slice(-1)
      return w[0]
    },
  },
  props: {
    lookFlowShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        jyh: 'N00000200000020202125',
        jyrq: '2023年12月29日',
        ywbh: '990026314555',
        yywbh: '33442222',
        ywlx: '新契约',
        baxmdm: '00535000',
        baxmmc: '健康无忧c型',
        wkpje: '10,600.00',
        jyjehs: '10,600.00',
        jyjebhs: '10,000.00',
        slv: '6%',
        se: '600.00',
        hprmc: '海闻科技有限公司',
        nsrsbh: '910000000000000011h',
        sfgryw: '否',
        zjlx: '营业执照',
        zjhm: '1102515654845625',
        xzdm: '00535000',
        xzjc: '健康无忧',
        xzqc: '535 v3.5 健康无忧C款重大疾病保险',
        bz: '产品代码:00535000/产品名称:健康无忧C款/缴费起期2020-07-07 /缴费止期2021-0707',
        jyjg: '新华保险北京分公司',
        tbdh: '投保单号',
        hjdh: '56200515495851',
        xpxslh: 'xxxxxxxx',
        jffs: 'xxxxx',
        sysbm: '',
        jfqq: '2023年12月29日',
        jfzq: '2024年12月29日11:12:47',
        dzyx: '56456812@qq.com',
        fwrybm: '张晚上',
        fwryxm: '广州续期营业区',
        q: '广州续期天河营业部',
        b: '广州双联单控复健科',
        z: '广州天然网',
        lyxt: '新核心',
        gsrq: '2023年12月29日',
      },
      zmToChinese: {
        jyh: '交易号',
        jyrq: '交易日期',
        ywbh: '交易编号',
        yywbh: '原业务编号',
        ywlx: '业务类型',
        baxmdm: '保全项目编码',
        baxmmc: '保全项目名称',
        wkpje: '未开票金额',
        jyjehs: '交易金额(含税)',
        jyjebhs: '交易金额(不含税)',
        slv: '税率',
        se: '税额',
        hprmc: '获票人名称',
        nsrsbh: '纳税人识别号',
        sfgryw: '是否个人业务',
        zjlx: '证件类型',
        zjhm: '证件号码',
        xzdm: '险种代码',
        xzjc: '险种简称',
        xzqc: '险种全称',
        bz: '备注',
        jyjg: '交易机构',
        tbdh: '投保单号',
        hjdh: '汇交单号',
        xpxslh: '学平险受理号',
        jffs: '缴费方式',
        sysbm: '税优识别码',
        jfqq: '缴费起期',
        jfzq: '缴费止期',
        dzyx: '电子邮箱',
        sjh: '手机号',
        fwrybm: '服务人员编码',
        fwryxm: '服务人员姓名',
        q: '区',
        b: '部',
        z: '组',
        lyxt: '来源系统',
        gsrq: '供数日期',
      },
    }
  },
  methods: {
    handleClose() {
      this.$emit('change', false)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
  animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

::v-deep .el-row {
  margin-bottom: 12px;
}

::v-deep .el-dialog {
  margin-top: 10px !important;
}
</style>